<template>
  <div class="about">
    <div class="container">
      <div class="card">
        <h1>关于项目</h1>
        <div class="content">
          <section>
            <h2>技术栈</h2>
            <ul>
              <li><strong>Vue 3</strong> - 采用 Composition API 和 script setup 语法</li>
              <li><strong>TypeScript</strong> - 提供类型安全保障</li>
              <li><strong>Vite</strong> - 快速的开发服务器和构建工具</li>
              <li><strong>Axios</strong> - HTTP 请求库，已配置好拦截器</li>
              <li><strong>Vue Router</strong> - 官方路由管理器</li>
            </ul>
          </section>

          <section>
            <h2>项目特性</h2>
            <ul>
              <li>⚡️ 极速的 HMR (热模块替换)</li>
              <li>🎨 现代化的 UI 设计</li>
              <li>📦 开箱即用的配置</li>
              <li>🔧 完整的 TypeScript 支持</li>
              <li>🌐 API 请求拦截和错误处理</li>
            </ul>
          </section>

          <section>
            <h2>快速开始</h2>
            <div class="code-block">
              <code>npm install</code><br>
              <code>npm run dev</code><br>
              <code>npm run build</code>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// About page
</script>

<style scoped>
.about {
  padding: 2rem 0;
  min-height: calc(100vh - 100px);
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.content {
  display: grid;
  gap: 2rem;
}

section {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 1.5rem;
  border-radius: 8px;
}

section h2 {
  color: #667eea;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

ul {
  list-style-position: inside;
  line-height: 2;
}

li {
  margin-bottom: 0.5rem;
}

.code-block {
  background: #2d2d2d;
  color: #f8f8f2;
  padding: 1.5rem;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  overflow-x: auto;
}

code {
  display: block;
  margin-bottom: 0.5rem;
}

code:last-child {
  margin-bottom: 0;
}
</style>
